<template>
  <div style="padding: 20px;">
    <div class="topLocation">比赛信息管理 / 比赛信息</div>
    <div class="topTool">
      <div class="group">主队：</div>
      <el-input v-model="searchHometeam" placeholder="请输入主队" style="margin-right: 50px;"></el-input>
      <div class="group">客队：</div>
      <el-input v-model="searchVisitingteam" placeholder="请输入客队" style="margin-right: 50px;"></el-input>
      <div class="group">地点：</div>
      <el-input v-model="searchGameplace" placeholder="请输入地点" style="margin-right: 50px;"></el-input>
      <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
    </div>
    <el-table
        :data="newsData"
        :header-cell-style="{ background: '#f6f9fa'}"
        @sort-change="handleSortChange"
        empty-text="暂无数据">
      <el-table-column type="selection"/>
      <el-table-column prop="id" label="ID" sortable></el-table-column>
      <el-table-column prop="hometeamname" label="主队"></el-table-column>
      <el-table-column prop="homepoint" label="主队得分"></el-table-column>
      <el-table-column prop="visitingteam" label="客队"></el-table-column>
      <el-table-column prop="visitingpoint" label="客队得分" ></el-table-column>
      <el-table-column prop="gameplace" label="比赛地点"></el-table-column>
      <el-table-column prop="gametime" label="比赛时间" :formatter="formatDate"></el-table-column>
      <el-table-column prop="winner" label="胜者"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        background
        v-model:currentPage="currentPage"
        v-model:pageSize="pageSize"
        :page-sizes="[5, 10, 20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref, onMounted, computed} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Delete, Edit, Plus, Search} from '@element-plus/icons-vue';
import {useRoute} from "vue-router";

// 响应式变量
const newsData = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const searchHometeam = ref('');
const searchVisitingteam = ref('');
const searchGameplace = ref('');


// 日期格式化函数
const formatDate = (row, column, cellValue) => {
  if (!cellValue) return '无日期';
  const date = new Date(cellValue);
  if (isNaN(date.getTime())) {
    return '无效日期';
  }
  return date.toLocaleDateString();
};

// 组件挂载时加载数据
onMounted(() => {
  getData();
});

// 获取数据
const getData = () => {
  axios.get('http://localhost:8080/game/findByPage', {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      hometeamname: searchHometeam.value,
      visitingteam: searchVisitingteam.value,
      gameplace: searchGameplace.value,
    }
  }).then(response => {
    newsData.value = response.data.data.records;
    total.value = response.data.data.total;
  }).catch(error => {
    console.error(error);
  });
};

// 当前页码变化
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};

// 每页条数变化
const handleSizeChange = (size) => {
  pageSize.value = size;
  getData();
};

// 查询
const handleSearch = () => {
  const params = {
    hometeamname: searchHometeam.value || null,
    visitingteam: searchVisitingteam.value || null,
    gameplace: searchGameplace.value || null
  };
  axios.get('http://localhost:8080/game/search', {params})
      .then(response => {
        newsData.value = response.data.data;
        total.value = response.data.data.length; // 假设返回的是数组，直接使用数组的长度作为总数
      })
      .catch(error => {
        console.error(error);
        ElMessage.error('查询失败');
      });
};

// 字段排序
const handleSortChange = (sortData) => {
  const {prop, order} = sortData;
  newsData.value = newsData.value.sort((a, b) => {
    if (order === 'ascending') {
      return a[prop] > b[prop] ? 1 : -1;
    } else {
      return a[prop] < b[prop] ? 1 : -1;
    }
  });
};

</script>

<style scoped>
.topLocation {
  font-size: 16px;
  font-weight: bold;
  color: #000; /* 文字颜色为黑色 */
  padding: 10px;
  border-bottom: 2px solid #000; /* 底部边框，黑色 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 20px; /* 增加距离 */
}

.topTool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.group {
  white-space: nowrap; /* 防止文字换行 */
  font-size: 14px; /* 设置字体大小为 14px */
}
</style>
